<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
	<title>Dynatree - Example</title>
<!--
	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
	<link href="../jquery/cupertino/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css">
-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
	<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/cupertino/jquery.ui.all.css" />
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

	<style type="text/css">
		#firstDiv {width:250px; float: left;}
		#outer {width:550px; float: left;}
		#tree {width:350px; float: left;}
		</style>
</head>
<script type="text/javascript">
	var gv_newRosterOptionID = -1;
	$(document).ready(function() {
		$("#tabs").tabs();

		$(function () {
			$("#tree").dynatree({
				debugLevel:2,
				onActivate: function (node) {
					$("#active").text(node.data.title);
				},
				onFocus: function (node) {
					$("#focus").text(node.data.title);
				},
				dnd: {
					preventVoidMoves: true,
					onDragStart: function (node) {
						//logMsg("tree.onDragStart(%o)", node);
						return true;
					},
					onDrop: function (node, sourceNode, hitMode, ui, draggable) {
						//logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
						sourceNode.move(node, hitMode);
					},
					onDragEnter: function (node, sourceNode) {
						return true; //["before", "after"];
					}
				}
			});
		});
	});
</script>
<body>
  <!-- Add a <div> element where the tree should appear: -->
	<div id="firstDiv">
	The First Div - push it left
	</div>
	<div id="outer">
		<P> This is some other text - Push it down
		<div id="tabs">
			<ul>
				<li><a href="#fragment-1"><span>One</span></a></li>
				<li><a href="#fragment-2"><span>Two</span></a></li>
				<li><a href="#fragment-3"><span>Three</span></a></li>
			</ul>
			<div id="fragment-1">
				<div id="tree">
					<ul>
						<li id="key1" title="Look, a tool tip!">item1 with key and tooltip
						<li id="key2" class="selected">item2: selected on init
						<li id="key3" class="folder">Folder with some children
							<ul>
								<li id="key3.1">Sub-item 3.1
								<li id="key3.2">Sub-item 3.2
							</ul>

						<li id="key4" class="expanded">Document with some children (expanded on init)
							<ul>
								<li id="key4.1">Sub-item 4.1
								<li id="key4.2">Sub-item 4.2
							</ul>
					</ul>
				</div>
			</div>
			<div id="fragment-2">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</div>
			<div id="fragment-3">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</div>
		</div>
	</div>
</body>
</html>
